<template>
    <div class='detail container'>
        <header>
            <div class='header-returns' v-show='isShow' :style="styleBack">
                <div @click='$router.back()'>
                    <i class='iconfont icon-fanhui'></i>
                </div>
                <div>
                    <i class='iconfont icon-kefu'></i>
                </div>
            </div>
            
            <div 
                class='header-bar' 
                v-show='!isShow'
                :style='styleOption'
            >
                <div @click='$router.back()'><i class='iconfont icon-fanhui'></i></div>
                <div>
                    <span>商品详情</span>
                    <span>商品评价</span>
                </div>
                <div><i class='iconfont icon-kefu'></i></div>
            </div>
        </header>
        <section ref='wrapper'>
            <div>
                <div class='swiper-main'>
                    <swiper class="swiper" :options="swiperOption">
                    	<swiper-slide>
                    		<img :src="goods.goods_imgUrl" alt="">
                    	</swiper-slide>
                        <swiper-slide>
                        	<img :src="goods.goods_imgUrl" alt="">
                        </swiper-slide>
                        <swiper-slide>
                        	<img :src="goods.goods_imgUrl" alt="">
                        </swiper-slide>
                    </swiper>
                    <div class="swiper-pagination"></div>
                </div>
                <div>
                    <div>标题：{{goods.goods_name}}</div>
                    <div>价格：{{goods.goods_price}}</div>
                </div>
                <div>
                    <img :src="goods.goods_imgUrl" alt="">
                    <img :src="goods.goods_imgUrl" alt="">
                    <img :src="goods.goods_imgUrl" alt="">
                    <img :src="goods.goods_imgUrl" alt="">
                    <img :src="goods.goods_imgUrl" alt="">
                    <img :src="goods.goods_imgUrl" alt="">
                </div>
            </div>
        </section>
        <footer>
            <ul>
                <li>购物车列表</li>
                <li @click='addCart'>加入购物车</li>
                <li>立即购买</li>
            </ul>
        </footer>
    </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import http from '@/common/api/request.js'
import BetterScroll from 'better-scroll'
import { Toast } from 'mint-ui';
export default{
    name : "detail",
    data() {
    	return {
            styleBack:{},
            styleOption:{},
            BetterScroll:'',
            isShow:true,
            updateId:'',
            goods:{},
    		swiperOption: {
    			autoplay: 3000,
    			speed: 1000,
    			pagination: {
    				el: '.swiper-pagination',
                    type: 'fraction'
    			}
    		}
    	}
    },
    components: {
    	swiper,
    	swiperSlide
    },
    created(){
        //获取当前商品id
        this.updateId = this.$route.query.id;
        //请求数据
        this.getData();
    },
    mounted(){
        this.BetterScroll = new BetterScroll(this.$refs.wrapper, {
            bounce: false,
            click:true,
            probeType:3
        })
        
        this.BetterScroll.on('scroll',(pos)=>{
            let posY = Math.abs( pos.y  );
            let opacity = posY / 180;
            let backPpacity = 30/posY;
            opacity = opacity > 1 ? 1 : opacity;
            backPpacity = backPpacity < 0 ? 0: backPpacity;
           
            this.styleOption = {
                opacity:opacity
            }
            this.styleBack = {
                opacity:backPpacity
            }
            
            if( posY >= 150 ){
                this.isShow = false;
            }else{
                this.isShow = true;
            }
            
        })
    },
    methods:{
        async getData(){
            let res = await http.$axios(  {
            	url:'/api/details',
                params:{
                    id:this.$route.query.id
                }
            })
            this.goods = Object.freeze(res.data);
        },
        //加入购物车
        addCart(){
            let id = this.$route.query.id;
            //发送请求
            http.$axios(  {
            	url:'/api/addCart',
                method:"post",
                headers:{
                    token:true
                },
                data:{
                    goodsId:id
                }
            }).then(res=>{
                if( res.success ){
                    Toast(res.msg);
                }
            })
        }
    },
    activated(){
        
        if( this.updateId != this.$route.query.id  ){
            this.getData();
            this.updateId = this.$route.query.id;
        }
    },
}
</script>

<style scoped lang='scss'>
header{
    position: fixed;
    top:0;
    left:0;
    z-index: 999;
    width: 100%;
    height: 1.173333rem;
    .header-returns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 1.173333rem;
        div{
            margin:0 0.266666rem;
            width: 0.933333rem;
            line-height: 0.933333rem;
            text-align: center;
            background-color: rgba(0,0,0,.3);
            color: #fff;
            border-radius: 50%;
            i{
                font-size:0.64rem;
            }
        }
    }
    .header-bar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 1.173333rem;
        font-size: 0.426666rem;
        background-color: #FFFFFF;
        span{
            margin:0 0.266666rem;
            font-weight: 300;
        }
        i{
            padding:0 0.266666rem;
            font-size:0.64rem;
        }
    }
}
section{
    flex:1;
    overflow: hidden;
   .swiper-main{
        position: relative;
        width: 100%;
        height: 10rem;
        overflow: hidden
        ::v-deep .swiper-pagination{
           width: 0.8rem;
           height: 0.8rem;
           font-size: 0.32rem;
           color:#fff;
           font-weight: 500;
           background-color: rgba(0,0,0,.3);
        }
        ::v-deep .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
           left: 90%;
           line-height: 0.8rem;
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
    img{
        width: 100%;
        height: 8rem;
    }
}

footer{
    width: 100%;
    height: 1.306666rem;
    border-top:1px solid #ccc;
    ul{
        display: flex;
        justify-content: space-around;
        align-items: center;
        li{
            line-height: 1.306666rem;
            font-size:0.373333rem;
        }
    }
}
</style>
